﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <title>匹配模式</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,700,900"> 
    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css">


    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/style.css">
    
  </head>
  <body>
  
  <div class="site-wrap">

    <div class="site-mobile-menu">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>


    <header class="site-navbar py-4 absolute transparent" role="banner">

      <div class="container">
        <div class="row align-items-center">
          

          <div class="col-3" data-aos="fade-down">
            <h1><a href="#" class="text-white h2">GoBang</a></h1>
          </div>
          <div class="col-9" data-aos="fade-down">
            <nav class="site-navigation position-relative text-right text-md-right" role="navigation">

                

                <!-- <div class="d-inline-block ml-md-0 mr-auto py-3"><a href="#" class="site-menu-toggle js-menu-toggle text-white"><span class="icon-menu h3"></span></a></div> -->

                <!-- <ul class="site-menu js-clone-nav d-none">
                  <li class="has-children active">
                    <a href="index.html">Music List</a>
                    <ul class="dropdown arrow-top">
                      <li class="has-children">
                        <ul class="dropdown">
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="has-children">
                    <ul class="dropdown arrow-top">
                    </ul>
                  </li>
                  <li><a href="about.html">Upload Music</a></li>
                  <li><a href="contact.html">LoveMusic</a></li>
                  <li><a href="#" id="exit">Exit</a></li>
                </ul> -->
            </nav>


          </div>

        </div>
      </div>
      
    </header>
    

    <div class="site-blocks-cover overlay" style="background-image: url(images/hero_bg_1.jpg);" data-aos="fade" data-stellar-background-ratio="0.5">
      <div class="container">
        <div class="row align-items-center justify-content-center text-center">

          <div class="col-md-8" data-aos="fade-up" data-aos-delay="400">
            <h1 id="username"><img src="images/1.png" style="width: 50px;border-radius: 2em;" id="bmg"> : 梦澜</h1>
            <div class="text-white mb-4" style="line-height: 5;"><span class="text-white-opacity-05" ><small id="text">天梯分数： | 总场数： | 获胜场数： </small></span></div>
            <p>
              <img src="images/1.jpg" style="width: 60px;border-radius: 2em;margin-right: 20px;">
              <a href="#" class="btn btn-primary btn-sm py-3 px-4 small" id="button">开始匹配</a>
            </p>
            
            
          </div>
        </div>
      </div>
    </div>  
      

    
  </div>

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-migrate-3.0.1.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.stellar.min.js"></script>
  <script src="js/jquery.countdown.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/aos.js"></script>

  <script src="js/mediaelement-and-player.min.js"></script>

  <script>
      document.addEventListener('DOMContentLoaded', function() {
                var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;

                for (var i = 0; i < total; i++) {
                    new MediaElementPlayer(mediaElements[i], {
                        pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/',
                        shimScriptAccess: 'always',
                        success: function () {
                            var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
                            for (var j = 0; j < targetTotal; j++) {
                                target[j].style.visibility = 'visible';
                            }
                  }
                });
                }
            });
    </script>


  <script src="js/main.js"></script>
  <script>
    $.ajax({
      type:"get",
      url:"/userinfo",
      success:function(body){
        console.log(body);
        let h = document.querySelector("#username");
        h.innerHTML = "玩家：" + body.data.username;
        let text = document.querySelector("#text");
        text.innerHTML = '天梯分数：' + body.data.score + ' '+ '| 总场数：' + body.data.totalCount +  ' '+'| 获胜场数：' + body.data.winCount;
      },

      error:function(){
        alert("获取用户信息失败");
      }
    });

    //初始化 websocket
    //此处的路径必须写作 /findMatch
    let websocketUrl = 'ws://' + location.host + '/findMatch';
    let websocket = new WebSocket(websocketUrl);

    websocket.onopen = function(){
      console.log("onopen");
    }

    websocket.onerror = function(){
      console.log("onerror");
    }

    websocket.onclose = function(){
      console.log("onclose");
    }
    //页面关闭之前手动调用 close 方法
    window.onbeforeunload = function(){
      websocket.close();
    }

    // websocket.onclose = function(){
    //   console.log("onclose");
    //   // alert("当前和服务器连接断开");
    //   // window.location.href = "login.html"
    // }

    //处理服务器返回的响应
    websocket.onmessage = function(e){
      //处理响应
      let resp = JSON.parse(e.data);
      let button = document.querySelector("#button");
      if(!resp.ok){
        console.log("接收到失败响应" + resp.reason);
        return;
      }

      if(resp.message == 'startMatch'){
        //开始匹配发送成功
        console.log("进入匹配队列");
        button.innerHTML = '匹配中……点击停止';
      }else if(resp.message == 'stopMatch'){
        //结束匹配发送成功
        console.log("离开匹配队列");
        button.innerHTML = '开始匹配';
      }else if(resp.message == 'MatchSuccess'){
        //已经匹配到对手
        console.log("匹配到对手跳转到房间");
        location.replace("room.html");
      }else if(resp.message == 'ToMany'){
          alert("禁止多开");
          location.replace("gblogin.html");
      }else{
        console.log("收到了非法响应" + resp.message);
      }
    }

    let button = document.querySelector("#button");
    button.onclick = function(){
      if(websocket.readyState == websocket.OPEN){
          //如果当前的为 open 状态 连接成功
          //这里发送的数据有两种可能，开始或者停止匹配

          if(button.innerHTML == '开始匹配'){
            console.log("开始匹配");
            websocket.send(JSON.stringify({
                message:'startMatch',
              }));
          }else if(button.innerHTML == '匹配中……点击停止'){
            console.log("停止匹配");
            websocket.send(JSON.stringify({
              message:'stopMatch',
            }));
          }
        }else{
          //连接当前是异常的情况
          alert("连接异常关闭，请重新登录");
          location.replace ("gblogin.html");
        }
      }
  </script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>


</body>
</html>